<template>
	<view class="wrap">
		<view class="flex">
			<image src="../../static/img/store.png" class="store-img"></image>
			<up-select v-model:current="storeUuid" label="全部门店" :showOptionsLabel="true" :options="storeList"
				@select="selectItem" class="ml10"></up-select>
		</view>
		<view class="order">
			<view class="flex-jc">
				<view class="title">
					待办订单
				</view>
				<view class="flex-ac" @click="toOrderList">
					<view>全部订单</view>
					<up-icon name="arrow-right"></up-icon>
				</view>
			</view>
			<view class="flex order-list">
				<view v-for="item in orderList" class="order-status">
					<view>{{ item.name }}</view>
					<view class="value">{{ groupData[item.id] }}</view>
				</view>
			</view>
		</view>

		<view class="container">
			<view class="title">基础功能</view>
			<view class="flex">
				<view class="flex-jc item" @click="toInventoryManage">
					<view class="">
						库存管理
					</view>
					<image src="../../static/img/index-icon1.png"></image>
				</view>
				<view class="flex-jc item" @click="toPriceManage">
					<view class="">
						价格管理
					</view>
					<image src="../../static/img/index-icon2.png"></image>
				</view>
			</view>
		</view>
		<view class="container">
			<view class="title">基础功能</view>
			<view class="flex">
				<view class="flex-jc item">
					<view class="">
						增值管理
					</view>
					<image src="../../static/img/index-icon1.png"></image>
				</view>
				<view></view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {
	ref,
	onMounted
} from 'vue';
import {
	onShow,
	onLoad
} from "@dcloudio/uni-app";

import {
	postRequest
} from "@/reuqest/request.js"
// 响应式数据  
const storeUuid = ref('全部门店')
const storeList = ref([])
const orderList = ref([{
	name: "今日待取车",
	id: 1
},
{
	name: "今日待还车",
	id: 2
},
{
	name: "近2日待取车",
	id: 3
},
{
	name: "近2日待还车",
	id: 4
},
{
	name: "逾期未取车",
	id: 5
},
{
	name: "逾期未还车",
	id: 6
},
{
	name: "总待取车",
	id: 7
},
{
	name: "总待还车",
	id: 8
},
{
	name: "近1日待取车",
	id: 9
},
{
	name: "近1日待还车",
	id: 0
}
])

const groupData = ref({})

const getCount = () => {
	postRequest("/wx-operation/api/v1/bm/order/groupCount", {
		pageNum: 1,
		pageSize: 2000,
	}).then(res => {
		if (res.bizCode === "00000") {
			groupData.value = res.data;
			console.log(groupData.value)
		}
	})
}

const toOrderList = () => {
	uni.switchTab({
		url: '/pages/order/order'
	})
}

// 方法  
const selectItem = (item) => {
	console.log(item);
	getCount()
};

onShow(() => {
	postRequest("/wx-operation/api/v1/bm/store/page", {
		pageNum: 1,
		pageSize: 2000,
	}).then(res => {
		if (res.bizCode === "00000") {
			storeList.value = res.data?.list?.map(item => ({ id: item.uuid, name: item.storeName })) ?? []
			storeUuid.value = storeList.value[0].id;
			getCount()
		}
	})
})



const toInventoryManage = () => {
	uni.navigateTo({
		url: '/pages/inventoryManage/index'
	})
}

const toPriceManage = () => {
	uni.navigateTo({
		url: '/pages/priceManage/index'
	})
}

</script>

<style lang="scss">
.wrap {
	padding: 20rpx;

	.store-img {
		width: 50rpx;
		height: 50rpx;
		vertical-align: -14rpx;
	}

	.order {
		margin-top: 50rpx;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		background-color: #f5f1ef;
		border: 1px solid #986C5D;
		font-size: 24rpx;
		color: #986C5D;

		.title {
			font-size: 28rpx;
			font-weight: bold;
		}

		.order-list {
			flex-wrap: wrap;

			.order-status {
				width: 25%;
				text-align: center;
				margin: 25rpx 0;

				.value {
					font-size: 40rpx;
					line-height: 60rpx;
				}
			}
		}
	}

	.container {
		margin-top: 80rpx;

		.title {
			font-size: 28rpx;
			font-weight: 500;
			margin-bottom: 32rpx;
		}

		&>.flex {
			padding: 0 20rpx;

			.item {
				padding: 20rpx 40rpx;
				border: 1px solid #B98A73;
				border-radius: 12rpx;
				font-size: 24rpx;
				font-weight: 400;
				width: 35%;

				&:nth-child(1) {
					margin-right: 50rpx;
				}

				image {
					width: 100rpx;
					height: 100rpx;
				}
			}
		}
	}
}

// .u-select__options__wrap{
// 	height: 50%;
// 	overflow: auto;

// }
.u-select__item_text {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
</style>